<template>
    <!-- Menu Section -->
    <div class="menu_bg">
      <div class="menu">
        <!-- 商品分类详情 -->
        <div class="nav">
          <div class="nav_t">全部商品分类</div>
          <div class="leftNav none">
            <ul>
              <li v-for="(category, index) in categories" :key="index">
                <div class="fj">
                  <span class="n_img"><span></span><img :src="category.icon" /></span>
                  <span class="fl">{{ category.name }}</span>
                </div>
                <div class="zj" :style="{ top: (-40 * index) + 'px' }">
                  <div class="zj_l">
                    <div v-for="subCategory in category.subCategories" :key="subCategory.title" class="zj_l_c">
                      <h2>{{ subCategory.title }}</h2>
                      <template v-for="(item, itemIndex) in subCategory.items" :key="itemIndex">
                        <a href="#">{{ item }}</a><span v-if="itemIndex < subCategory.items.length - 1">|</span>
                      </template>
                    </div>
                  </div>
                  <div class="zj_r">
                    <a href="#"><img :src="category.ads[0]" width="236" height="200" /></a>
                    <a href="#"><img :src="category.ads[1]" width="236" height="200" /></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <ul class="menu_r">
          <li><router-link to="/">首页</router-link></li>
          <li><a href="#">美食</a></li>
          <li><a href="#">生鲜</a></li>
          <li><a href="#">家居</a></li>
          <li><a href="#">女装</a></li>
          <li><a href="#">美妆</a></li>
          <li><a href="#">数码</a></li>
          <li><a href="#">团购</a></li>
        </ul>
        <div class="m_ad">中秋送好礼！</div>
      </div>
    </div>
    <!-- Main Content -->
    <div class="i_bg">
      <!-- Banner Section -->
      <div class="n_ban">
        <div class="top_slide_wrap">
          <ul class="slide_box bxslider">
            <li v-for="(banner, index) in banners" :key="index">
              <a href="#" :style="{ background: `url(${banner.image}) no-repeat center top` }">{{ banner.title }}</a>
            </li>
          </ul>
          <div class="op_btns clearfix">
            <a href="#" class="op_btn op_prev"><span></span></a>
            <a href="#" class="op_btn op_next"><span></span></a>
          </div>
        </div>
      </div>
      <div class="content mar_10">
        <!-- 特卖左侧 -->
        <div class="s_left">
          <div class="brand_t">品牌特卖</div>
          <ul class="sell_brand">
            <li v-for="brand in brandSales" :key="brand.id">
              <div class="con">
                <div class="simg"><img :src="brand.logo" width="220" height="100" /></div>
                <div class="ch_bg">
                  <span class="ch_txt">{{ brand.description }}</span>
                  <a href="#" class="ch_a">查看</a>
                </div>
                {{ brand.period }}
              </div>
              <div class="img"><img :src="brand.banner" width="530" height="190" /></div>
            </li>
          </ul>
          <div class="brand_t">商品特卖</div>
          <ul class="p_sell">
            <li v-for="product in saleProducts" :key="product.id">
              <div class="img"><img :src="product.image" width="160" height="140" /></div>
              <div class="name">{{ product.name }}</div>
              <div class="price">
                <table border="0" style="width:100%; color:#888888;" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr style="font-family:'宋体';">
                      <td width="33%">市场价</td>
                      <td width="33%">折扣</td>
                      <td width="33%">为您节省</td>
                    </tr>
                    <tr>
                      <td style="text-decoration:line-through;">￥{{ product.originalPrice }}</td>
                      <td>{{ product.discount }}</td>
                      <td>￥{{ product.savings }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="ch_bg">
                <span class="ch_txt">￥<font>{{ product.salePrice }}</font></span>
                <a href="#" class="ch_a">查看</a>
              </div>
              <div class="times">{{ product.countdown }}</div>
            </li>
          </ul>
        </div>
        <!-- 右侧内容 -->
        <div class="s_right">
          <div class="sell_ban">
            <div id="imgPlays">
              <ul class="imgs" id="actors">
                <li v-for="(img, index) in rightBanners" :key="index">
                  <a href="#"><img :src="img" width="300" height="352" /></a>
                </li>
              </ul>
              <div class="prev_s">上一张</div>
              <div class="next_s">下一张</div>
              <div class="num" id="numInner">
                <!-- 指示器将由JS动态生成 -->
              </div>
            </div>
          </div>
          <div class="sell_hot">
            <div class="s_hot_t">
              <span class="fl">热销品牌</span>
              <span class="h_more fr"><a href="#">更多</a></span>
            </div>
            <ul>
              <li v-for="(hotBrand, index) in hotBrands" :key="index">
                <a href="#"><img :src="hotBrand" width="160" height="59" /></a>
              </li>
            </ul>
          </div>
          <div class="sell_tel">
            <table border="0" style="width:280px; margin:15px auto;" cellspacing="0" cellpadding="0">
              <tbody>
                <tr valign="top">
                  <td width="170"><img :src="require('@/assets/images/tm_1.png')" /></td>
                  <td>
                    客服在线时间<br />
                    每天09:00 - 18:00
                  </td>
                </tr>
                <tr valign="top">
                  <td colspan="2" style="padding-left:58px; padding-top:10px;">
                    <span style="color:#ff4e00; font-size:20px;">400-123-4567</span><br />
                    客服热线（免费长途）
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="sell_tel">
            <table border="0" style="width:280px; margin:15px auto;" cellspacing="0" cellpadding="0">
              <tbody>
                <tr valign="top">
                  <td width="170"><img :src="require('@/assets/images/tm_2.png')" /></td>
                  <td>
                    享受VIP专属特权
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="sell_tel">
            <table border="0" style="width:280px; margin:15px auto;" cellspacing="0" cellpadding="0">
              <tbody>
                <tr valign="top">
                  <td width="170"><img :src="require('@/assets/images/tm_3.png')" /></td>
                  <td>
                    客服在线时间<br />
                    每天09:00 - 18:00
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'SellPage',
  data() {
    return {
      isLoggedIn: true,
      cartCount: 3,
      cartItems: [
        {
          id: 1,
          name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只',
          price: 399,
          quantity: 1,
          image: require('@/assets/images/car1.jpg')
        },
        {
          id: 2,
          name: '香奈儿（Chanel）邂逅活力淡香水50ml',
          price: 399,
          quantity: 1,
          image: require('@/assets/images/car2.jpg')
        },
        {
          id: 3,
          name: '香奈儿（Chanel）邂逅活力淡香水50ml',
          price: 399,
          quantity: 1,
          image: require('@/assets/images/car2.jpg')
        }
      ],
      // 轮播图数据
      banners: [
        { title: 'banner1', image: require('@/assets/images/n_ban.jpg') },
        { title: 'banner2', image: require('@/assets/images/n_ban.jpg') },
        { title: 'banner3', image: require('@/assets/images/n_ban.jpg') }
      ],
      rightBanners: [
        require('@/assets/images/tm_ban.jpg'),
        require('@/assets/images/tm_ban.jpg'),
        require('@/assets/images/tm_ban.jpg')
      ],
      categories: [
        {
          name: '进口食品、生鲜',
          icon: require('@/assets/images/nav1.png'),
          subCategories: [
            {
              title: '零食 / 糖果 / 巧克力',
              items: ['坚果', '蜜饯', '红枣', '牛肉干', '巧克力', '口香糖', '海苔', '鱼干']
            }
          ],
          ads: [require('@/assets/images/n_img1.jpg'), require('@/assets/images/n_img2.jpg')]
        },
        {
          name: '食品、饮料、酒',
          icon: require('@/assets/images/nav2.png'),
          subCategories: [
            {
              title: '零食 / 糖果 / 巧克力',
              items: ['坚果', '蜜饯', '红枣', '牛肉干', '巧克力', '口香糖', '海苔', '鱼干']
            }
          ],
          ads: [require('@/assets/images/n_img1.jpg'), require('@/assets/images/n_img2.jpg')]
        }
      ],
      brandSales: [
        {
          id: 1,
          logo: require('@/assets/images/sb1.jpg'),
          description: '先领券再消费',
          period: '09月12日 — 10月20日',
          banner: require('@/assets/images/tm1.jpg')
        },
        {
          id: 2,
          logo: require('@/assets/images/sb2.jpg'),
          description: '先领券再消费',
          period: '09月12日 — 10月20日',
          banner: require('@/assets/images/tm2.jpg')
        },
        {
          id: 3,
          logo: require('@/assets/images/sb3.jpg'),
          description: '先领券再消费',
          period: '09月12日 — 10月20日',
          banner: require('@/assets/images/tm3.jpg')
        }
      ],
      saleProducts: [
        {
          id: 1,
          name: '苹果 Iphone 6S',
          image: require('@/assets/images/t1.jpg'),
          originalPrice: 5388,
          discount: '8.0',
          savings: 100,
          salePrice: 5288,
          countdown: '倒计时：1200 时 30 分 28 秒'
        },
        {
          id: 2,
          name: '登机箱拉杆箱',
          image: require('@/assets/images/t2.jpg'),
          originalPrice: 5388,
          discount: '8.0',
          savings: 100,
          salePrice: 288,
          countdown: '倒计时：1200 时 30 分 28 秒'
        },
        {
          id: 3,
          name: '粉色hp笔记本',
          image: require('@/assets/images/t3.jpg'),
          originalPrice: 5388,
          discount: '8.0',
          savings: 100,
          salePrice: 3899,
          countdown: '倒计时：1200 时 30 分 28 秒'
        },
        {
          id: 4,
          name: 'diva少女系香水',
          image: require('@/assets/images/t4.jpg'),
          originalPrice: 5388,
          discount: '8.0',
          savings: 100,
          salePrice: 567,
          countdown: '倒计时：1200 时 30 分 28 秒'
        }
      ],
      hotBrands: [
        require('@/assets/images/hb_1.jpg'),
        require('@/assets/images/hb_2.jpg'),
        require('@/assets/images/hb_3.jpg'),
        require('@/assets/images/hb_4.jpg'),
        require('@/assets/images/hb_5.jpg'),
        require('@/assets/images/hb_6.jpg'),
        require('@/assets/images/hb_7.jpg'),
        require('@/assets/images/hb_8.jpg'),
        require('@/assets/images/hb_9.jpg'),
        require('@/assets/images/hb_10.jpg'),
        require('@/assets/images/hb_11.jpg'),
        require('@/assets/images/hb_12.jpg')
      ]
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0)
    }
  },
  methods: {
    // 加载jQuery和插件
    loadJQueryAndPlugins() {
      return new Promise((resolve) => {
        if (window.$ && window.$.fn.bxSlider) {
          resolve()
          return
        }
        
        // 加载jQuery
        const jqueryScript = document.createElement('script')
        jqueryScript.src = '/js/jquery-1.11.1.min_044d0927.js'
        jqueryScript.onload = () => {
          // 加载bxSlider
          const bxScript = document.createElement('script')
          bxScript.src = '/js/jquery.bxslider_e88acd1b.js'
          bxScript.onload = () => {
            window.jq = window.jQuery.noConflict()
            resolve()
          }
          document.head.appendChild(bxScript)
        }
        document.head.appendChild(jqueryScript)
      })
    },
    // 初始化bxSlider
    initBxSlider() {
      const $ = window.$ || window.jQuery
      if (!$ || !$.fn.bxSlider) {
        console.error('bxSlider not loaded')
        return
      }
      
      console.log('Initializing bxSlider...')
      
      // 确保元素存在
      if ($('.bxslider').length === 0) {
        console.error('bxslider element not found')
        return
      }
      
      // 初始化bxSlider
      const slider = $('.bxslider').bxSlider({
        auto: true,
        pause: 4000,
        mode: 'horizontal',
        speed: 500,
        infiniteLoop: true,
        hideControlOnEnd: false,
        controls: true,
        pager: false,
        prevText: '上一张',
        nextText: '下一张',
        onSliderLoad: function() {
          console.log('bxSlider loaded successfully')
          // 手动绑定按钮事件
          $('.top_slide_wrap .op_prev').click(function(e) {
            e.preventDefault()
            slider.goToPrevSlide()
          })
          $('.top_slide_wrap .op_next').click(function(e) {
            e.preventDefault()
            slider.goToNextSlide()
          })
        }
      })
    },
    // 初始化右侧轮播图（按照s_ban.js的逻辑）
    initRightSlider() {
      const $ = window.$ || window.jQuery
      if (!$) return
      
      let t = false
      let str = ''
      const speed = 500
      const w = 300
      const n = this.rightBanners.length
      const numWidth = n * 18
      let c = 0
      
      const $actors = $('#actors')
      const $numInner = $('#numInner')
      const $imgPlays = $('#imgPlays')
      
      // 设置宽度
      $actors.width(w * n)
      
      // 生成指示器
      for (let i = 0; i < n; i++) {
        str += '<span></span>'
      }
      $numInner.width(numWidth).html(str)
      
      // 设置首个指示器为活跃状态
      $numInner.find('span:first').addClass('on')
      
      function cur(ele, currentClass) {
        ele = $(ele) ? $(ele) : ele
        ele.addClass(currentClass).siblings().removeClass(currentClass)
      }
      
      // 下一张
      $('.sell_ban #imgPlays .next_s').click(function() {
        slide(1)
      })
      
      // 上一张
      $('.sell_ban #imgPlays .prev_s').click(function() {
        slide(-1)
      })
      
      function slide(j) {
        if ($actors.is(':animated') === false) {
          c += j
          if (c !== -1 && c !== n) {
            $actors.animate({
              'marginLeft': -c * w + 'px'
            }, speed)
          } else if (c === -1) {
            c = n - 1
            $actors.css({
              'marginLeft': -(w * (c - 1)) + 'px'
            })
            $actors.animate({
              'marginLeft': -(w * c) + 'px'
            }, speed)
          } else if (c === n) {
            c = 0
            $actors.css({
              'marginLeft': -w + 'px'
            })
            $actors.animate({
              'marginLeft': 0 + 'px'
            }, speed)
          }
          cur($numInner.find('span').eq(c), 'on')
        }
      }
      
      // 指示器点击
      $numInner.find('span').click(function() {
        c = $(this).index()
        fade(c)
        cur($numInner.find('span').eq(c), 'on')
      })
      
      function fade(i) {
        if ($actors.css('marginLeft') !== -i * w + 'px') {
          $actors.css('marginLeft', -i * w + 'px')
          $actors.fadeOut(0, function() {
            $actors.fadeIn(500)
          })
        }
      }
      
      function start() {
        t = setInterval(function() {
          slide(1)
        }, 5000)
      }
      
      function stopt() {
        if (t) clearInterval(t)
      }
      
      // 鼠标悬停自动播放
      $imgPlays.hover(function() {
        stopt()
      }, function() {
        start()
      })
      
      // 启动自动播放
      start()
    }
  },
  mounted() {
    // 等待DOM渲染完成后初始化轮播图
    this.$nextTick(() => {
      // 加载jQuery和bxSlider
      this.loadJQueryAndPlugins().then(() => {
        // 再次等待确保DOM完全渲染
        setTimeout(() => {
          // 初始化主轮播图（bxSlider）
          this.initBxSlider()
          // 初始化右侧轮播图（自定义）
          this.initRightSlider()
        }, 200)
      })
    })
  },
  beforeUnmount() {
    // 清理定时器
    // jQuery的定时器会自动清理
  }
}
</script>

<style scoped>

</style>